import React, { Component } from 'react';
import {
  WhiteSpace,
  WingBlank,
  Toast,
  Flex,
  List,
  Button,
  SegmentedControl,
} from 'antd-mobile';
import { connect } from 'dva';
import MyListView from '../../components/MyListView/MyListView';
import { evaluate_list, btn } from './evaluateList.less';
import  EvaluateListItem  from './EvaluateListItem';
import GoodsTitle from '../goodsDetail/GoodsTitle';
import CartBar from '../goodsDetail/CartBar';
const Item = List.Item;

class EvaluateList extends Component {
  constructor(props) {
    super(props);
      this.state = {
          layoutType:true,
          open:false,
          gevalScore:"",
          gevalImg:""
      };
      this.AlloyTouch = null;
      this.oldData = "";
  }

    componentDidMount() {
            this.props.dispatch({ type: 'goodsDetail/goodsDetailEFF', obj: { specId: this.props.match.params.specId, pageNo:1 } });
    }
    componentWillMount() {
        // console.log("触发 componentWillMount。。。。。。。。。。。。。。。。。。。。。");
        // console.log(this.props.match.params.specId, "this.props.match.params");
        this.oldData = this.props.match.params.specId;
        this.props.dispatch({type: "goodsDetail/clearSpecId"});
    }

    componentWillUnmount() {
        this.props.dispatch({type: "goodsDetail/emptyEFF", obj: {goodsId: this.props.goodsDetail.goodsDetailInfo.id}});
    }
    refresh = (gevalScore,gevalImg) => {
      this.setState({
          gevalScore:gevalScore,
          gevalImg:gevalImg
      });
      console.log(gevalScore,gevalImg,321)
        return this.props.dispatch({ type: 'evaluateList/evaluatesEFF', obj:{goodsId:this.props.match.params.goodsId,gevalScore:gevalScore, pageNo:1 ,gevalImg:gevalImg} });
    }

    loadMore = () => {
      console.log(123)
        return this.props.dispatch({ type: 'evaluateList/evaluatesEFF', obj:{goodsId:this.props.match.params.goodsId,gevalScore:this.state.gevalScore ,pageNo:this.props.evaluateList.pageNo+1,specId:this.props.match.params.specId,gevalImg:this.state.gevalImg } });
    }

    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };


  render() {
    const { evaluateList,goodsDetail, location, dispatch } = this.props;
    const { evaluteEntity, list, hasMore,  goodsId,  gevalScore,gevalImg } = evaluateList;
    const { all, general, bad , imgCount, good  } = evaluteEntity;
      const { goodsDetailInfo, buyCount, couponList = [] } = goodsDetail;
      //   const { modal1, vsible } = this.state;
      const {
          id,specId="", callyList  = [], name = '', salenum=0, cityName = "",
          spec = {}, shopActivityList = [], commentnum = 0, evaluate,  goodsShow = 1,
          transfeeCharge = '', evaluateGoodsList=[], consultationNum=0,
          storeId, storeLabel = '', storeName="", evaluateNum, storeGoodsNum, storeTrendsNum, storeDescription, evaluateStore,
          recommendList=[], orderList=[],
          bottomGoodsInfo, isFav, cartCount,
          specName, speAll, image
      } = goodsDetailInfo;
      const { specGoodsPrice = 0, specGoodsSpec = {} } = spec;
    console.log(this.state.gevalImg)
    return (
      <Flex
          className={evaluate_list}
          style={{ height:"100%"}}
          direction="column"
      >
        <GoodsTitle id={id || goodsId} specId={specId} alloyTouch={ this.AlloyTouch } dispatch={dispatch} location={location}></GoodsTitle>
        <Flex className="evaluate_title">
           <Flex.Item>
             <Flex
                 onClick={()=>{
                     if(this.state.gevalScore!=""){
                         this.refresh("","")
                         // dispatch({ type:'evaluateList/evaluatesEFF', obj:{goodsId:this.props.match.params.goodsId, gevalScore:null, pageNo:1,gevalImg:'' } });
                         this.AlloyTouch.to(0);
                     }
                  }
                 }
                 className={ this.state.gevalScore===""&&this.state.gevalImg==="" ? "select_title" : "" }
                 direction="column"
             >
               <div>全部评论</div>
               <div>{all||0}</div>
             </Flex>
           </Flex.Item>
          <Flex.Item>
            <Flex
                onClick={()=>{
                    if( this.state.gevalScore!=5){
                        this.refresh(5,"")
                        // dispatch({ type:'evaluateList/evaluatesEFF', obj:{goodsId:this.props.match.params.goodsId, gevalScore:5, pageNo:1 ,gevalImg:''} });
                        this.AlloyTouch.to(0);
                    }
                }
                }
                className={  this.state.gevalScore==5 ? "select_title" : "" }
                direction="column"
            >
              <div>好评</div>
              <div>{good||0}</div>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex
                onClick={()=>{
                    if( this.state.gevalScore!==3){
                        this.refresh(3,"")
                        // dispatch({ type:'evaluateList/evaluatesEFF', obj:{ goodsId:this.props.match.params.goodsId,gevalScore:3, pageNo:1,gevalImg:'' } });
                        this.AlloyTouch.to(0);
                    }
                 }
                }
                className={  this.state.gevalScore==3 ? "select_title" : "" }
                direction="column"
            >
              <div>中评</div>
              <div>{general||0}</div>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex
                onClick={()=>{
                    if( this.state.gevalScore!==1){
                        this.refresh(1,"");
                        // dispatch({ type:'evaluateList/evaluatesEFF', obj:{ gevalScore:1, pageNo:1 ,gevalImg:''} });
                        this.AlloyTouch.to(0);
                    }
                }
                }
                className={  this.state.gevalScore==1 ? "select_title" : "" }
                direction="column"
            >
              <div>差评</div>
              <div>{bad||0}</div>
            </Flex>
          </Flex.Item>
          <Flex.Item>
            <Flex
                onClick={()=>{
                    if(this.state.gevalImg!==0){
                        this.refresh("",0)
                        // dispatch({ type:'evaluateList/evaluatesEFF', obj:{ goodsId:this.props.match.params.goodsId,gevalScore:"", pageNo:1,gevalImg:0 } });
                        this.AlloyTouch.to(0);
                    }
                 }
                }
                className={ this.state.gevalImg===0 ? "select_title" : "" }
                direction="column"
            >
              <div>晒图</div>
              <div>{imgCount||0}</div>
            </Flex>
          </Flex.Item>
        </Flex>

        <MyListView
            // key={ layoutType == true ? 1 : 0 }
            //  className={ wrapper_goods_list }
            getAlloyTouch={ this.getAlloyTouch }
            refresh={ this.refresh }
            loadMore={ this.loadMore }
            hasMore={ this.props.evaluateList.pageNo * this.props.evaluateList.pageSize < this.props.evaluateList.totalRows  }
           // itemWrapperClass={ goods_list }
           // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
            renderItem={(v,i,a)=>{
                return (
                  <EvaluateListItem dispatch={dispatch} v={v} key={i}  refresh={ this.refresh }></EvaluateListItem>
                )
            }}
            data={ list }>
        </MyListView>

          <CartBar goodsDetailInfo={goodsDetailInfo} showT={true} storeId={storeId} goodsId={id} spec={spec} dispatch={dispatch} cartCount={this.props.goodsDetail.cartCount || cartCount} isFav={isFav}></CartBar>
      </Flex>
    );
  }
}

export default connect(({evaluateList,goodsDetail})=>({evaluateList,goodsDetail}))(EvaluateList);
